<script setup lang="ts">
import showCard from "@/components/views/showCard/showCard.vue";
import userListForm from "./components/userListForm.vue";

</script>
<template>
  <div class="container">
    <div class="conTop">
      <showCard v-for="item in 4" :key="item" bgc="#e9f1fc">
        <template #title>用户总数</template>
        <template #number>1000</template>
        <template #img>
          <img src="../../static/image/logo.png" alt=""
        /></template>
        <template #tag>上升:12%</template>
      </showCard>
    </div>
      <userListForm></userListForm>
  </div>
</template>
<style lang="scss" scoped>
.container {
  .conTop {
    width: 100%;
    height: 20vh;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  img {
    //scoped 导致和组件里的v-data不同，样式无法生效
    width: 100%;
    height: 100%;
  }
}
</style>
